<template>
  <div class="w h b-f box-b">
    <div class="w f-s p-t10 p-l10">
      <el-button @click="goBackToDataManage()" icon="ArrowLeft" type="text">返回</el-button>
    </div>
    <div class="w f-b a-i-c box-b p10">
      <div>
        日期：&nbsp;<el-date-picker v-model="date" type="daterange" class="w-160"></el-date-picker>
      </div>
      <el-button type="primary" @click="getDataList">查询</el-button>
    </div>
    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="无标注信息" name="0"> </el-tab-pane>
      <el-tab-pane label="有标注信息" name="1"> </el-tab-pane>
    </el-tabs>
    <div class="w h box-b" style="height:calc(100% - 140px)">
      <div class="w box-b  f-s" style="height:calc(100% - 60px);align-items: flex-start;">
        <div class="left-statistics el-card box-b p-l10 p-r10" v-if="!isNoTagging">
          <div class="el-card__header">标签栏</div>
          <div class="card-content over-a-y" style="height:calc(100% - 60px)">
            <page-text label="标签名" text="数量" style="height:30px"></page-text>
            <div class="w">
              <page-text v-for="key in Object.keys(labels)" :label="key" :text="labels[key]"
                :key="key" style="height:30px"></page-text>
            </div>
          </div>
        </div>
        <div class="right-box el-card box-b over-a" style="margin-left:-1px">
          <div class="image-box">
            <div class="image-info">
              <el-icon-render class="el-icon-plus" color="#666" :size="30"></el-icon-render>
            </div>
            <div class="image-text f-c a-i-c els w over-h" title="添加图片">添加图片</div>
          </div>
          <div class="image-box" v-for="(item, i) in imageList" :key="i">
            <div class="image-info">
              <!-- <img :src="getImagePath(item)" /> -->
              <el-image  class="w" :image="getImagePath(item)" :src="getImagePath(item)" :preview-src-list="[getImagePath(item)]"  lazy />
            </div>
            <div class="image-text f-c a-i-c els" title="添加图片">
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="w f-c h-60 a-i-c">
        <el-pagination v-model:current-page="current" :page-size="size" :background="false"
          layout="total, sizes, prev, pager, next, jumper" :page-sizes="[100, 200, 300, 400]"
          :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ElIconRender, PageText } from '@/importComponents'
import { type TabsPaneContext } from 'element-plus'
import { getNowDate } from '@/utils'
import { imageApis, type RequestCode } from '@/server/base'
import { Togging } from '@/apis/collection/togging'

export default {
  name: 'taggingManage',
  components: { ElIconRender, PageText },
  data() {
    return {
      activeName: '0',
      date: [new Date(getNowDate(-7)), new Date()],

      imageNoTaggingList: [] as any[],
      imageTaggingList: [] as any[],

      labels: {} as any,

      current: 1,
      size: 100,
      total: 1,
      pages: 1
    }
  },
  computed: {
    isNoTagging() {
      return this.activeName == '0'
    },
    imageCollectionId() {
      return this.$route.params.projectId || '1'
    },
    routerNm
    imageList: {
      get() {
        return this.isNoTagging ? this.imageNoTaggingList : this.imageTaggingList
      },
      set(val: any[]) {
        if (this.isNoTagging) {
          this.imageNoTaggingList = val
          return
        }
        this.imageTaggingList = val
      }
    }
  },
  methods: {
    getImagePath(row: {
      id: number
      state: number
      createTime: string
      photoListId: number
      order: number
      name: string
      rawName: string
    }) {
      // /annotation/41/simp/409.png
      return `${imageApis}/${row.photoListId}/simp/${row.name}`
    },

    handleClick(tab: TabsPaneContext, event: Event) {
      (this as any).activeName=tab.props.name;
        this.getDataList()
    },
    handleSizeChange(val: number) {
      this.size = val
      this.current = 1
      this.getDataList()
    },
    handleCurrentChange(val: number) {
      this.current = val
      this.getDataList()
    },
    getDataList() {
      if (!this.date || this.date.length <= 0) {
        ;(this as any).$message.error('请选择日期！')
        return
      }
      const params = {
        current: this.current,
        id: this.imageCollectionId + '',
        size: this.size,
        state: this.isNoTagging ? 0 : 1,
        startTime: getNowDate(0, this.date[0]),
        endTime: getNowDate(0, this.date[1])
      }
      Togging.imageList(params)
        .then((res: RequestCode) => {
          const { images, labels } = res.data
          const { total, size, current, pages, records } = images
          this.total = total
          this.size = size
          this.current = current
          this.pages = pages

          this.imageList = records

          this.labels = labels
        })
        .catch(() => {})
    },
    goBackToDataManage() {
      this.$router.push({ name: 'dataManage' })
    }
  },
  created() {
    this.getDataList()
  }
}
</script>

<style scoped lang="scss">
.left-statistics {
  width: 260px;
  height: 100%;
  flex-shrink: 0;

  .page-text {
    border-bottom: 1px solid var(--el-card-border-color);
  }
}

.right-box {
  display: flex;
  flex-grow: 1;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 2px;

  --box-size: 100px;

  .image-box {
    width: var(--box-size);
    height: calc(var(--box-size) + 0);
    margin: 8px;

    .image-info {
      background: #ececec;
      width: var(--box-size);
      height: calc(var(--box-size) - 30px);
      @extend .f-c, .a-i-c;
    }

    .image-text {
      height: 30px;
    }
  }
}
</style>